React useSyncExternalStore: Menguasai Integrasi State Eksternal

Hook useSyncExternalStore React, yang diperkenalkan di React 18, menyediakan cara yang kuat dan efisien untuk mengintegrasikan sumber data eksternal dan pustaka manajemen state ke dalam komponen React Anda. Hook ini memungkinkan komponen untuk berlangganan perubahan di store eksternal, memastikan bahwa UI selalu mencerminkan data terbaru sambil mengoptimalkan performa. Panduan ini memberikan gambaran komprehensif tentang useSyncExternalStore, mencakup konsep inti, pola penggunaan, dan praktik terbaiknya.

Memahami Kebutuhan useSyncExternalStore

Dalam banyak aplikasi React, Anda akan menghadapi skenario di mana state perlu dikelola di luar pohon komponen. Hal ini sering terjadi ketika berurusan dengan:

• Pustaka pihak ketiga: Mengintegrasikan dengan pustaka yang mengelola state mereka sendiri (misalnya, koneksi database, API browser, atau mesin fisika).
• State bersama antar komponen: Mengelola state yang perlu dibagikan antara komponen yang tidak berhubungan langsung (misalnya, status otentikasi pengguna, pengaturan aplikasi, atau event bus global).
• Sumber data eksternal: Mengambil dan menampilkan data dari API eksternal atau database.

Solusi manajemen state tradisional seperti useState dan useReducer sangat cocok untuk mengelola state komponen lokal. Namun, keduanya tidak dirancang untuk menangani state eksternal secara efektif. Menggunakannya secara langsung dengan sumber data eksternal dapat menyebabkan masalah performa, pembaruan yang tidak konsisten, dan kode yang kompleks.

useSyncExternalStore mengatasi tantangan ini dengan menyediakan cara yang terstandarisasi dan dioptimalkan untuk berlangganan perubahan di store eksternal. Ini memastikan bahwa komponen hanya di-render ulang ketika data yang relevan berubah, meminimalkan pembaruan yang tidak perlu dan meningkatkan performa secara keseluruhan.

Konsep Inti dari useSyncExternalStore

useSyncExternalStore menerima tiga argumen:

1. subscribe: Sebuah fungsi yang menerima callback sebagai argumen dan berlangganan ke store eksternal. Callback akan dipanggil setiap kali data store berubah.
2. getSnapshot: Sebuah fungsi yang mengembalikan snapshot data dari store eksternal. Fungsi ini harus mengembalikan nilai yang stabil yang dapat digunakan React untuk menentukan apakah data telah berubah. Fungsi ini harus murni dan cepat.
3. getServerSnapshot (opsional): Sebuah fungsi yang mengembalikan nilai awal dari store selama server-side rendering. Ini penting untuk memastikan bahwa HTML awal cocok dengan rendering sisi klien. Ini HANYA digunakan di lingkungan server-side rendering. Jika dihilangkan di lingkungan sisi klien, ia menggunakan getSnapshot sebagai gantinya. Penting bahwa nilai ini tidak pernah berubah setelah awalnya di-render di sisi server.

Berikut adalah rincian dari setiap argumen:

1. subscribe

Fungsi subscribe bertanggung jawab untuk membangun koneksi antara komponen React dan store eksternal. Fungsi ini menerima fungsi callback, yang harus dipanggil setiap kali data store berubah. Callback ini biasanya digunakan untuk memicu render ulang komponen.

Contoh:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

Dalam contoh ini, store.addListener menambahkan callback ke daftar listener store. Fungsi ini mengembalikan fungsi pembersihan yang menghapus listener ketika komponen di-unmount, mencegah kebocoran memori.

2. getSnapshot

Fungsi getSnapshot bertanggung jawab untuk mengambil snapshot data dari store eksternal. Snapshot ini harus berupa nilai stabil yang dapat digunakan React untuk menentukan apakah data telah berubah. React menggunakan Object.is untuk membandingkan snapshot saat ini dengan snapshot sebelumnya. Oleh karena itu, fungsi ini harus cepat dan sangat disarankan untuk mengembalikan nilai primitif (string, number, boolean, null, atau undefined).

Contoh:

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

Dalam contoh ini, store.getData mengembalikan data saat ini dari store. React akan membandingkan nilai ini dengan nilai sebelumnya untuk menentukan apakah komponen perlu di-render ulang.

3. getServerSnapshot (Opsional)

Fungsi getServerSnapshot hanya relevan ketika server-side rendering (SSR) digunakan. Fungsi ini dipanggil selama render server awal, dan hasilnya digunakan sebagai nilai awal dari store sebelum hidrasi terjadi di klien. Mengembalikan nilai yang konsisten sangat penting untuk keberhasilan SSR.

Contoh:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

Dalam contoh ini, `store.getInitialDataForServer` mengembalikan data awal yang sesuai untuk server-side rendering.

Contoh Penggunaan Dasar

Mari kita pertimbangkan contoh sederhana di mana kita memiliki store eksternal yang mengelola sebuah penghitung. Kita dapat menggunakan useSyncExternalStore untuk menampilkan nilai penghitung di komponen React:

            // External store
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React component
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Dalam contoh ini, createStore membuat sebuah store eksternal sederhana yang mengelola nilai penghitung. Komponen Counter menggunakan useSyncExternalStore untuk berlangganan perubahan di store dan menampilkan jumlah saat ini. Ketika tombol increment diklik, fungsi setState memperbarui nilai store, yang memicu render ulang komponen.

Integrasi dengan Pustaka Manajemen State

useSyncExternalStore sangat berguna untuk berintegrasi dengan pustaka manajemen state seperti Zustand, Jotai, dan Recoil. Pustaka-pustaka ini menyediakan mekanisme mereka sendiri untuk mengelola state, dan useSyncExternalStore memungkinkan Anda untuk mengintegrasikannya secara mulus ke dalam komponen React Anda.

Berikut adalah contoh integrasi dengan Zustand:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Zustand store
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// React component
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand menyederhanakan pembuatan store. Implementasi internal subscribe dan getSnapshot-nya digunakan secara implisit saat Anda berlangganan state tertentu.

Berikut adalah contoh integrasi dengan Jotai:

            import { atom, useAtom } from 'jotai'

// Jotai atom
const countAtom = atom(0)

// React component
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai menggunakan atom untuk mengelola state. useAtom secara internal menangani langganan dan snapshotting.

Optimisasi Performa

useSyncExternalStore menyediakan beberapa mekanisme untuk mengoptimalkan performa:

• Pembaruan Selektif: React hanya me-render ulang komponen ketika nilai yang dikembalikan oleh getSnapshot berubah. Ini memastikan bahwa render ulang yang tidak perlu dihindari.
• Batching Updates: React menggabungkan pembaruan dari beberapa store eksternal ke dalam satu render ulang. Ini mengurangi jumlah render ulang dan meningkatkan performa secara keseluruhan.
• Menghindari Stale Closures: useSyncExternalStore memastikan bahwa komponen selalu memiliki akses ke data terbaru dari store eksternal, bahkan ketika berurusan dengan pembaruan asinkron.

Untuk lebih mengoptimalkan performa, pertimbangkan praktik terbaik berikut:

• Minimalkan jumlah data yang dikembalikan oleh getSnapshot: Hanya kembalikan data yang benar-benar dibutuhkan oleh komponen. Ini mengurangi jumlah data yang perlu dibandingkan dan meningkatkan efisiensi proses pembaruan.
• Gunakan teknik memoization: Memoize hasil perhitungan mahal atau transformasi data. Ini dapat mencegah perhitungan ulang yang tidak perlu dan meningkatkan performa.
• Hindari langganan yang tidak perlu: Hanya berlangganan ke store eksternal ketika komponen benar-benar terlihat. Ini dapat mengurangi jumlah langganan aktif dan meningkatkan performa secara keseluruhan.
• Pastikan getSnapshot mengembalikan objek *stabil* baru hanya jika data berubah: Hindari membuat objek/array/fungsi baru jika data dasarnya tidak benar-benar berubah. Kembalikan objek yang sama melalui referensi jika memungkinkan.

Server-Side Rendering (SSR) dengan useSyncExternalStore

Saat menggunakan useSyncExternalStore dengan server-side rendering (SSR), sangat penting untuk menyediakan fungsi getServerSnapshot. Fungsi ini memastikan bahwa HTML awal yang di-render di server cocok dengan rendering sisi klien, mencegah kesalahan hidrasi dan meningkatkan pengalaman pengguna.

Berikut adalah contoh penggunaan getServerSnapshot:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Important for SSR

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React component
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Dalam contoh ini, getServerSnapshot mengembalikan nilai awal dari penghitung. Ini memastikan bahwa HTML awal yang di-render di server cocok dengan rendering sisi klien. getServerSnapshot harus mengembalikan nilai yang stabil dan dapat diprediksi. Fungsi ini juga harus melakukan logika yang sama dengan fungsi getSnapshot di server. Hindari mengakses API khusus browser atau variabel global di getServerSnapshot.

Pola Penggunaan Lanjutan

useSyncExternalStore dapat digunakan dalam berbagai skenario lanjutan, termasuk:

• Integrasi dengan API Browser: Berlangganan perubahan pada API browser seperti localStorage atau navigator.onLine.
• Membuat Hook Kustom: Mengenkapsulasi logika untuk berlangganan ke store eksternal ke dalam sebuah hook kustom.
• Menggunakan dengan Context API: Menggabungkan useSyncExternalStore dengan React Context API untuk menyediakan state bersama ke pohon komponen.

Mari kita lihat contoh pembuatan hook kustom untuk berlangganan ke localStorage:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error getting value from localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Manually trigger storage event for same-page updates
    } catch (error) {
      console.error("Error setting value in localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

  const storedValue = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

Dalam contoh ini, useLocalStorage adalah hook kustom yang berlangganan perubahan di localStorage. Hook ini menggunakan useSyncExternalStore untuk mengelola langganan dan mengambil nilai saat ini dari localStorage. Hook ini juga dengan benar mengirimkan event 'storage' untuk memastikan pembaruan pada halaman yang sama tercermin (karena event `storage` hanya diaktifkan di tab lain). serverSnapshot memastikan nilai awal disediakan dengan benar di lingkungan server.

Praktik Terbaik dan Kesalahan Umum

Berikut adalah beberapa praktik terbaik dan kesalahan umum yang harus dihindari saat menggunakan useSyncExternalStore:

• Hindari memutasi store eksternal secara langsung: Selalu gunakan API store untuk memperbarui data. Memutasi store secara langsung dapat menyebabkan pembaruan yang tidak konsisten dan perilaku yang tidak terduga.
• Pastikan getSnapshot murni dan cepat: getSnapshot tidak boleh memiliki efek samping dan harus mengembalikan nilai yang stabil dengan cepat. Perhitungan mahal atau transformasi data harus di-memoize.
• Sediakan fungsi getServerSnapshot saat menggunakan SSR: Ini sangat penting untuk memastikan bahwa HTML awal yang di-render di server cocok dengan rendering sisi klien.
• Tangani kesalahan dengan baik: Gunakan blok try-catch untuk menangani potensi kesalahan saat mengakses store eksternal.
• Bersihkan langganan: Selalu berhenti berlangganan dari store eksternal saat komponen di-unmount untuk mencegah kebocoran memori. Fungsi subscribe harus mengembalikan fungsi pembersihan yang menghapus listener.
• Pahami implikasi performa: Meskipun useSyncExternalStore dioptimalkan untuk performa, penting untuk memahami dampak potensial dari berlangganan ke store eksternal. Minimalkan jumlah data yang dikembalikan oleh getSnapshot dan hindari langganan yang tidak perlu.
• Uji Secara Menyeluruh: Pastikan integrasi dengan store berfungsi dengan benar dalam skenario yang berbeda, terutama dalam server-side rendering dan concurrent mode.

Kesimpulan

useSyncExternalStore adalah hook yang kuat dan efisien untuk mengintegrasikan sumber data eksternal dan pustaka manajemen state ke dalam komponen React Anda. Dengan memahami konsep inti, pola penggunaan, dan praktik terbaiknya, Anda dapat secara efektif mengelola state bersama di aplikasi React Anda dan mengoptimalkan performa. Baik Anda berintegrasi dengan pustaka pihak ketiga, mengelola state bersama antar komponen, atau mengambil data dari API eksternal, useSyncExternalStore menyediakan solusi yang terstandarisasi dan andal. Manfaatkan hook ini untuk membangun aplikasi React yang lebih kuat, mudah dipelihara, dan beperforma tinggi untuk audiens global.

Sumber Daya Lebih Lanjut

• Dokumentasi React tentang useSyncExternalStore
• Pull Request React 18 yang memperkenalkan useSyncExternalStore
• Pustaka Manajemen State Zustand
• Pustaka Manajemen State Jotai